<template>
  <div class="wrapper-container" style="width:100%;display: flex; flex-direction: column">
    <div class="search-container" style="margin:0;padding-left:0">
      <div class="search-container-left" v-if="roleId != '1490859421955674114'">
        <div class="search-container-item">
          <span style="color:#004ca7">学期：</span>
          <el-select v-model="searchParams.termid" size="mini" placeholder="请选择学期" style="width: 140px" clearable>
            <el-option v-for="(item, index) in xqList" :key="index" :label="item.xqmc" :value="item.xqmc">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span style="color:#004ca7">批次：</span>
          <el-select v-model="searchParams.planname" size="mini" placeholder="请选择批次" style="width: 140px" clearable>
            <el-option v-for="(item, index) in selectPcList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span style="color:#004ca7">考试类型：</span>
          <el-select v-model="searchParams.checktype" size="mini" placeholder="请选择考试类型" style="width: 140px" clearable>
            <el-option v-for="(item, index) in checkTypeList" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="margin-left: 35px;">
          <span style="color:#004ca7">日期：</span>
          <el-date-picker type="date" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择日期"
            v-model="searchParams.exadate" style="width: 140px" size="mini"></el-date-picker>
        </div>
        <div class="search-container-item">
          <span style="color:#004ca7">节&ensp;&ensp;&ensp;&ensp;次：</span>
          <el-select v-model="searchParams.exaschedule" size="mini" placeholder="请选择节次" style="width:140px" clearable>
            <el-option v-for="item in sectionList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:445px;margin-left:35px">
          <span>课程负责单位：</span>
          <el-select v-model="searchParams.department" style="width: 140px;margin-right:5px" size="mini"
            placeholder="请选择" @change="handleXb" clearable
            :disabled="roleId == '1490880728751644674' || roleId == '1498848865273745410' || roleId == '1476444221949898754' || roleId == '1475294432243830786' || roleId == '1490880584475975682' || roleId == '1496015526935564290' || roleId == '1490880658945843202'">
            <el-option style="margin-right:5px" v-for="(item, index) in xbList" :key="index" :label="item.deptName"
              :value="item.deptName">
            </el-option>
          </el-select>
          <el-select v-model="searchParams.teachingandresearchsection" style="width: 140px" size="mini"
            placeholder="请选择" @change="handleClass" clearable
            :disabled="roleId == '1490880728751644674' || roleId == '1498848865273745410' || roleId == '1476444221949898754' || roleId == '1475294432243830786' || roleId == '1490880584475975682' || roleId == '1496015526935564290'">
            <el-option v-for="(item, index) in gClassList" :key="index"
              :label="item.deptName ? item.deptName : item.value" :value="item.deptName ? item.deptName : item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="margin-top:15px">
          <span style="color:#004ca7">队别：</span>
          <el-select v-model="searchParams.studentteam" size="mini" placeholder="请选择队别" style="width:140px" clearable
            :disabled="roleId == '1476444221949898754' || roleId == '1475294432243830786'">
            <el-option v-for="item in ddList" :key="item.id" :label="item.deptName" :value="item.deptName">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="margin-top:15px">
          <span style="color:#004ca7">级次：</span>
          <el-select v-model="searchParams.studentlevel" size="mini" placeholder="请选择级次" style="width:140px" clearable>
            <el-option v-for="(item, index) in njList" :key="index" :label="item.xqszxn" :value="item.xqszxn">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="margin-top:15px">
          <span style="color:#004ca7">专业班次：</span>
          <el-select v-model="searchParams.specialtyclassname" size="mini" placeholder="请选择专业班次" style="width: 140px"
            clearable>
            <el-option v-for="(item) in specialtyList" :key="item.id" :label="item.className" :value="item.className">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="margin:15px 0 0 35px;">
          <span>人数：</span>
          <el-input style="width: 140px;" size="mini" placeholder="请输入内容" v-model="searchParams.coursename" clearable
            type="number" min="1"></el-input><span style="margin-left:5px">人</span>
        </div>
        <div class="search-container-item" style="margin:15px 0 0 0">
          <span>课程名称：</span>
          <el-input style="width: 160px;" size="mini" placeholder="请输入内容" v-model="searchParams.coursename" clearable>
          </el-input>
        </div>
        <div class="search-container-item" style="width:300px;margin:15px 0 0 35px">
          <span style="margin-right: 38px;">教员名称：</span>
          <el-input style="width: 160px" size="mini" placeholder="请输入内容" v-model="searchParams.teachingfaculty" clearable>
          </el-input>
        </div>
        <div class="search-button" style="margin:17px 0 0 0" @click="handleQuery">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
      <div class="search-container-left" v-if="roleId == '1490859421955674114'">
        <div class="search-container-item" style="width:230px">
          <span style="color:#004ca7">学期：</span>
          <el-select v-model="searchParams.termid" size="mini" placeholder="请选择学期" style="width: 140px" clearable>
            <el-option v-for="(item, index) in xqList" :key="index" :label="item.xqmc" :value="item.xqmc">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px">
          <span style="color:#004ca7">批次：</span>
          <el-select v-model="searchParams.planname" size="mini" placeholder="请选择批次" style="width: 160px" clearable>
            <el-option v-for="(item, index) in selectPcList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px">
          <span style="color:#004ca7">考试类型：</span>
          <el-select v-model="searchParams.checkType" size="mini" placeholder="请选择考试类型" style="width: 140px" clearable>
            <el-option v-for="(item, index) in checkTypeList" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px;margin:0 0 0 35px">
          <span style="color:#004ca7">日期：</span>
          <el-date-picker type="date" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择日期"
            v-model="searchParams.exadate" style="width: 140px" size="mini"></el-date-picker>
        </div>
        <div class="search-container-item" style="width:230px">
          <span style="color:#004ca7">节&ensp;&ensp;&ensp;&ensp;次：</span>
          <el-select v-model="searchParams.exaschedule" size="mini" placeholder="请选择节次" style="width:140px" clearable>
            <el-option v-for="item in sectionList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:420px;margin-left:35px">
          <span>课程负责单位：</span>
          <el-select v-model="searchParams.department" style="width: 140px;margin-right:5px" size="mini"
            placeholder="请选择" @change="handleXb" clearable>
            <el-option style="margin-right:5px" v-for="(item, index) in xbList" :key="index" :label="item.deptName"
              :value="item.deptName">
            </el-option>
          </el-select>
          <el-select v-model="searchParams.teachingandresearchsection" style="width: 140px" size="mini"
            placeholder="请选择" @change="handleClass" clearable>
            <el-option v-for="(item, index) in gClassList" :key="index"
              :label="item.deptName ? item.deptName : item.value" :value="item.deptName ? item.deptName : item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px;margin-top:15px">
          <span style="color:#004ca7">队别：</span>
          <el-select v-model="searchParams.studentteam" size="mini" placeholder="请选择队别" style="width:140px" clearable>
            <el-option v-for="(item, index) in ddList" :key="index" :label="item.deptName" :value="item.deptName">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px;margin-top:15px">
          <span style="color:#004ca7">级次：</span>
          <el-select v-model="searchParams.studentlevel" size="mini" placeholder="请选择级次" style="width:140px" clearable>
            <el-option v-for="(item, index) in njList" :key="index" :label="item.xqszxn" :value="item.xqszxn">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px;margin-top:15px">
          <span style="color:#004ca7">专业班次：</span>
          <el-select v-model="searchParams.specialtyclassname" size="mini" placeholder="请选择专业班次" style="width: 140px"
            clearable>
            <el-option v-for="(item) in specialtyList" :key="item.id" :label="item.className" :value="item.className">
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item" style="width:230px;margin:15px 0 0 35px;">
          <span style="color:#004ca7">人数：</span>
          <el-input v-model="searchParams.biggernumber" size="mini" style="width:120px" type="number"
            placeholder="请输入人数"></el-input><span style="margin-left:5px;color:#004ca7">人</span>
        </div>
        <div class="search-container-item" style="width:230px;margin:15px 0 0 0">
          <span>课程名称：</span>
          <el-input style="width: 140px;" size="mini" placeholder="请输入内容" v-model="searchParams.coursename" clearable>
          </el-input>
        </div>
        <div class="search-container-item" style="width:260px;margin:15px 0 0 35px">
          <span style="margin-right: 38px;">教员名称：</span>
          <el-input style="width: 140px" size="mini" placeholder="请输入内容" v-model="searchParams.teachingfaculty"
            clearable></el-input>
        </div>
        <div class="search-button" style="margin:17px 0 0 20px" @click="handleQuery">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <tablelist :dataList="dataList" :colDataList="colDataList" :config="config"></tablelist>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <download-excel class="export-btn" :data="dataList" :fields="jsonFields" type="xls" name="考试安排记录.xls"
          style="color: #f3b815">
          &ensp;导出Excel
        </download-excel>
        <!--        <span>导出Excel</span>-->
      </div>
      <div class="text">授课教员名字后加“*”为课程负责人</div>
      <div>
        <el-pagination style="margin-top:10px;padding:0" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="cuurrentPage" :page-sizes="[10, 20, 30, 50]"
          :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="btn">
      <el-button native-type="submit" size="medium " type="warning" class="submit" v-show="this.record === 3"
        @click="choiceLink(4)">授权</el-button>
    </div>
  </div>
</template>

<script>
import tablelist from "@/views/comonents/tablelist";
import { coursePlanGetList, selectPc } from "../../../api/courseExame/coursePlan";
import { reqGetXqList, queryDictByCode, reqXydList, reqZybcList, reqCheckYearList } from "@/api/admin1/check";
import { getxb, getClass, queryXBclassroom } from "@/api/course/courses";
import { getStore } from "@/util/store.js"

export default {
  components: {
    tablelist,
  },
  name: "supervisonMain",
  data() {
    return {
      current: 1,
      size: 10,
      total: '',
      searchParams: {
        termid: '',
        planname: '',
        department: '',
        teachingandresearchsection: '',
        coursename: "",
        exaschedule: "",
        exadate: "",
        studentteam: '',
        specialtyclassname: '',
        studentlevel: '',
        checkType: '',
        biggernumber: '',
        teachingfaculty: '',
      },
      roleId: '',
      code: 'section',
      xbList: [],
      gClassList: [],
      sectionList: [], //节次
      selectPcList: [],
      ddList: [],
      // 正常，补考，第二次补考，缓考 ，第二次补缓考
      specialtyList: [],
      colDataList: [
        {
          label: "日期",
          prop: "exadate",
        },
        {
          label: "节次",
          prop: "exaschedule",
        },
        {
          label: "系",
          prop: "department",
        },
        {
          label: "教研室",
          prop: "teachingandresearchsection",
        },
        {
          label: "考试课程",
          prop: "coursename",
        },
        {
          label: "授课教员",
          prop: "teachingfaculty",
        },
        {
          label: "考试类型",
          prop: "checktype",
        },
        {
          label: "考试方式",
          prop: "finalexamination",
        },
        {
          label: "队别",
          prop: "studentteam",
        },
        {
          label: "级次",
          prop: "studentlevel",
        },
        {
          label: "专业班次",
          prop: "specialtyclassname",
        },
        {
          label: "人数",
          prop: "biggernumber",
        },
        {
          label: "考场",
          prop: "exasite",
        },
        {
          label: "监考员",
          prop: "exaterName",
        },
        {
          label: "备注",
          prop: "paramvalue",
        },
      ],
      checkTypeList: [
        {
          label: "正常",
          value: "正常",
        },
        {
          label: "补考",
          value: "补考",
        },
        {
          label: "第二次补考",
          value: "第二次补考",
        },
        {
          label: "缓考",
          value: "缓考",
        },
        {
          label: "第二次补缓考",
          value: "第二次补缓考",
        }
      ],
      dataList: [],
      jsonFields: {
        '日期': 'exadate',
        '节次': 'exaschedule',
        '系': 'department',
        '教研室': 'teachingandresearchsection',
        '考试课程': 'coursename',
        '授课教员': 'teachingfaculty',
        '考试类型': 'checktype',
        '考试方式': 'finalexamination',
        '队别': 'studentteam',
        '级次': 'studentlevel',
        '专业班次': 'specialtyclassname',
        '人数': 'biggernumber',
        '考场': 'exasite',
        '监考员': 'exaterName',
        '备注': 'paramvalue',
      },
      config: {
        mergeTarget: "", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性

        ],
      },
      record: 0,
      setName: "",
      njList: [],
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
  },
  mounted() {
    selectPc().then(res => {
      this.selectPcList = res.data.data;
    })
    this.termAll();
    this.xbAll();
    this.ddAll();
    this.getlist();
    this.classAll();
    this.sectionData();
    this.gradeAll();
    this.queryAllCoursePlanList();
  },
  methods: {
    //获取年级
    gradeAll() {
      let that = this;
      reqCheckYearList().then(res => {
        if (res.data.code == 200 && res.data.data) {
          that.njList = res.data.data;
        }
      });
    },
    //获取专业班次
    async getlist() {
      const result = await reqZybcList();
      result.data.code == 200 ? this.specialtyList = result.data.data : [];
    },
    // 获取队别下拉框
    async ddAll() {
      const result = await reqXydList();
      result.data.code == 200 ? this.ddList = result.data.data : [];
    },
    handleCurrentChange(val) {
      this.current = val;
      this.queryAllCoursePlanList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.queryAllCoursePlanList();
    },
    async xbAll() {
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll() {
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 根据系部选中获取教研室
    async handleXb(val) {
      if (val) {
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
        this.searchParams.teachingandresearchsection = ''
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    // 教研室下拉框的改变
    handleClass(val) {
      if (!val) {
        this.xb ? this.handleXb(this.xb) : this.classAll();
      }
    },
    //学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    //节次
    sectionData() {
      queryDictByCode(this.code).then(res => {
        this.sectionList = res.data.data;
      })
    },
    queryAllCoursePlanList() {
      coursePlanGetList(this.current, this.size, this.searchParams).then(res => {
        this.dataList = res.data.data.records;
        // this.total = res.data.data.total;
        for (let i = 0; i < res.data.data.length; i++) {
          this.dataList[i].teachingfaculty = res.data.data[i].teachingfaculty + '*';
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryAllCoursePlanList();
    },
    choiceLink(index) {
      this.record = index;
    },
  },
  computed: {}, //计算属性
};
</script>


<style lang="less" scoped>
@import "../../../styles/supervision.less";

/deep/.el-date-editor .el-input__prefix {
  left: auto;
  right: 10px;
  top: 2px;
}

/deep/ .table-container {
  margin: 15px 0 0 0;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    >div {
      margin-bottom: 8px;
    }
  }

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;

  .search-container-item {
    width: 260px;
    ;
    margin-right: 0px;

    .box {
      >span {
        text-align: left;
      }

      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}

/deep/ .el-input--medium {
  width: 110px;

  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}

/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;

  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}

.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;

  .export-button {
    cursor: pointer;
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;

    >img {
      width: 17px;
      height: 17px;
    }

    >span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
</style>
